<template>
  <div>
    <br>
    <br>
    <Breadcrumb :datas='datas'></Breadcrumb>

	<myheader></myheader>
	<section class="featured-block text-center">
		<div class="container">

				<table>
					<tr>
						<td>
							用户名:
						</td>
						<td>
							<input type="text" v-model="username" placeholder="请输入用户名">
						</td>
					</tr>
					<tr>
						<td>
							密码:
						</td>
						<td>
							<input type="password" v-model="password">
						</td>
					</tr>
					<tr>
            <td>
              验证码：
            </td>
              <td>
                <input type="text" v-model="code"/>
            </td>
          </tr>
					<tr>
            <td>
              </td>
              <td>
                <img @click="changimg" :src="src" class="imgcode" alt="">
              </td>
              <td>
						</td>
          </tr>
					<tr>
            <td>
              </td>
              <td>
								<!-- 滑块验证码-->
                <drag-verify
								:width='width'
								:height='height'
								:text='text'
								ref='Verify'>

								</drag-verify>
              </td>
              <td>
						</td>
          </tr>
					<tr>
						<td></td>
						<td>
							<Button @click="submit" color="blue">登录</Button>
							<Button @click="reginfo" color="red">重置</Button>

							&emsp;
							<!--引入微博图片-->
							<img @click="sina" class="imgcode" src="http://127.0.0.1:8000/static/sina.png">
							&emsp;
							<img @click="ding" class="imgcode" src="http://127.0.0.1:8000/static/dingding.png">
						</td>
					</tr>
				</table>

		</div>
	</section>
	<myfooter></myfooter>
  </div>
</template>
<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'
// 导入滑块验证码
import dragVerify from 'vue-drag-verify'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //表单数据
	  username:'',
	  password:'',
		code:'',
		src:'http://127.0.0.1:8000/mycode/',
		//声明滑块验证码相关数据
		width:320,
		height:42,
		text:'请将滑块向右拖动',
	  //面包屑导航变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}]
    }
  },
  //注册组件标签
  components:{
	  'myheader':myheader,
		'myfooter':myfooter,
		'dragVerify':dragVerify,
  },
  mounted:function(){
},
  methods:{
		
		//钉钉三方登录
		ding:function(){
			
			//拼接钉钉url
			let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoas0flvw1koxnmk1fa&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/md_admin/dingding'
			  //跳转
  		window.location.href = url;

		},


		//新浪微博三方登录
		sina:function(){

			//拼接新浪微博url
			let clinet_id = 3249062725;

  		let url = "https://api.weibo.com/oauth2/authorize?client_id=3249062725&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

  		//跳转
  		window.location.href = url;

		},

		//点击刷新验证码
		changimg(){
			//随机字符串
			var num = Math.ceil(Math.random()*10);
			//赋值地址
			this.src = this.src + '?code='+ num

		},
	  //重置按钮
	  reginfo:function(){
		  this.username = "";
			this.password = "";
			this.code = "";
	  },
	  //定义提交事件
	  submit:function(){

			//判断是否拖动
			console.log(this.$refs.Verify.isPassing);

		  //非空验证
		  if(this.username== ''){
			  this.$Message('您没有输入用户名');
			  return false
		  }
		  if(this.password==''){
			  this.$Message('密码不能为空');
			  return false
			}
			if(this.code == ''){
				this.$Message('请输入验证码');

				return false
			}
			if(this.$refs.Verify.isPassing == false){
				this.$Message('请拖动验证码');
				return false
			}
		  //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/login/',{
				params:{username:this.username,password:this.password,code:this.code}
				}).then((result)=>{

			//登录成功
			localStorage.setItem("username",result.data.username);
			localStorage.setItem("uid",result.data.uid);
			localStorage.setItem("jwt",result.data.jwt);
			  console.log(result);
			this.$Message(result.data.message);
			if(result.data.code==200){
					//跳转页面
				this.$router.push('/');
			}
			})

	  }
  }
}
</script>
<style>
td{
	padding:10px
}
.imgcode {
	cursor: pointer;
}
</style>
